<template>
		<div class="quiz-index">
			<y-nav title="超准！十道题看透你的爱情观" :goBack="goBack" :shareData="shareData"></y-nav>
			<img src="../assets/quiz_entry_people.png" alt="" class="quiz-entry-people" :class="marginForX">
			<div class="entry-wrap">
				<div class="entry-common entry-back" :class="{backActive: this.active}">{{entryText}}</div>
				<div class="entry-common entry-front" :class="{frontActive: this.active}"
				 @touchstart="touchStart" @touchend.stop.prevent="touchEnd">{{entryText}}</div>
			</div>
			<div class="update-dialog" v-if="showUpdate">
				<div class="update-content">
					<div class="update-text">参与活动<br> {{updateText}}</div>
					<div @click="toUpdate" class="update-btn">{{updateBtnText}}</div>
				</div>
				<div class="iconfont icon-x" @click="close"></div>
			</div>
		</div>
	</template>
	<script>
	let u = navigator.userAgent;
	import code from './data/code.json';
	import shareData from './data/shareData.js';
	import Nav from '@/components/nav';
	export default {
		components: {
			[Nav.name]: Nav
		},
		data() {
			return {
				active: false,
				quizResult: {},
				shareData,
				headers: {},
				showUpdate: false,
				activityInfo: {},
				updateText: '请升级至最新版本～',
				updateBtnText: '现在就去'
			}
		},
		methods: {
			touchStart() {
				this.active = true;
			},
			touchEnd() {
				if (this.headers.appVersion < "1.3.2" || !this.headers.appVersion) {
					this.showUpdate = true;
					this.active = false;
					return;
				}
				if (this.quizResult.completeFlag) {
					this.$router.push(`/official-activity/quiz-result/${this.quizResult.answer}`);
					return;
				}
				this.$router.push('/official-activity/quiz-start');
			},
			async getTestStatus() {
				let res = await this.$http({
					url: '/lovelorn/v1.3/pt/activity-testing-infos/action/status',
					method: 'get',
					params: {
						activityCode: code.activityCode
					}
				});
				this.quizResult = res.data.data;
			},
			goBack() {
				this.$yryz.goBack();
			},
			getShareData(activityInfo) {
				let url = `${window.location.origin}/official-activity/quiz-share/SL-sqlxcst0428lub-${this.headers.userId}`;
				let title = activityInfo.title || shareData.title;
				let content = activityInfo.description || shareData.content;
				this.shareData = Object.assign(shareData, { url, title, content });
			},
			async getActivityInfo() {
				let res = await this.$http.get(`/lovelorn/v1.3/pb/activity-info/action/info`, { params: {activityCode: code.activityCode}});
				this.activityInfo = res.data.data;

				this.getShareData(this.activityInfo);
			},
			close() {
				this.showUpdate = false;
			},
			toUpdate() {
				if (u.indexOf('iPhone') > -1) {
					window.location.href = 'itms-apps://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1438503085'
				} else {
					// window.location.href = 'https://sj.qq.com/myapp/detail.htm?apkName=com.yryz.lovelorn'
					this.showUpdate = false;
				}
			}
		},
		computed: {
			marginForX() {
				return this.$utils.isIphoneX() ? 'marginForX' : '';
			},
			entryText() {
				return this.quizResult.completeFlag ? '查看我的 测试结果' : '点击解码 你的爱情';
			},
			
		},
		async mounted() {
			if (this.$utils.isAndroid()) {
				this.updateText = "请前往应用商店进行升级～";
				this.updateBtnText = "好的"
			}
			let headers = await this.$yryz.httpHeader();
			this.headers = headers;
			await this.getTestStatus();
			await this.getActivityInfo();
		}
	}
	</script>
	<style>
	.quiz-index {
		background-image: url('../assets/quiz_bg_title.png');
		background-repeat: no-repeat;
		background-size: contain;
		margin-top: 1.2rem;
		font-size: 0;
		height: 90vh;
	   
		& .quiz-entry-people{
			width: 7.5rem;
			height: 7.56rem;
			margin-top: 40%;
			position: absolute;
			bottom: 0;
		}
		& .marginForX{
			margin-top: 76%;
		}
		& .entry-common {
			height: 1rem;
			border: 3px solid #000;
		   text-align: center;
		   padding: 0.1rem 0.2rem;
		   font-family: happyfont;
		   font-size: .5rem;
		   font-weight: bold;
		}
		& .entry-wrap{
			display: flex;
			margin-left: 28%;
			margin-top: -26%;
			position: absolute;
		   bottom: 1rem;
		}
		& .entry-back{
			background: #f4d114;
		}
		& .entry-front{
			background: #fff;
			margin-left: -90.5%;
			margin-top: -2%;
		}
		& .backActive {
			background: #fff;
		}
		& .frontActive{
			background: #fa6166;
			color: #fff;
		}
		& .update-dialog{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.6);
			z-index: 99;
			-webkit-tap-highlight-color: transparent;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		& .update-content{
			background-image: url('../assets/update_note.png');
			background-size: cover;
			width: 6.59rem;
			height: 4.15rem;
			font-size: .32rem;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		& .update-text{
			font-weight: bold;
			text-align: center;
			margin-top: 1.3rem;
		}
		& .update-btn{
			width: 2.42rem;
			border-radius: .4rem;
			background-color: #5dc8ff;
			color: #fff;
			font-weight: bold;
			font-size: .28rem;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: .2rem .3rem;
			margin-top: .4rem;
		}
		& .icon-x{
			font-size: .6rem;
			color: #f8f8f8;
			margin-top: .3rem;
		}
		
	}
	</style>